<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>Bootstrap test</title>
    <!--描述-->
    <meta content="官方博客" name="Description">
    <!--关键词   -->
    <meta content="名称" name="Keywords">
    <!--坑爹的IE兼容-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--将360浏览器默认为极速模式打开-->
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet" media="screen">
    <!--<link href="./css/bootstrap.min.css" rel="stylesheet" media="screen">-->
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar">
<!--导航-->

    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <!--<div class="nav-collapse collapse">-->
                    <ul class="nav">
                        <li class="active"><a href="">首页</a></li>
                        <li><a href="">起步</a></li>
                        <li><a href="">脚手架</a></li>
                        <li><a href="">基本CSS样式</a></li>
                        <li><a href="">组件</a></li>
                        <li><a href="">JavaScript插件</a></li>
                        <li><a href="">定制</a></li>
                        <li><a href="">网站实例</a></li>
                    </ul>
                <!--</div>-->
            </div>
        </div>
    </div>

<!--页头-->
<header>
<div class="jumbotron masthead">

    <div class="container" style="margin-top: 137px;text-align: center">
            <h1 style="font-size: 100px;color: #000000">
                Bootstrap
            </h1>
            <p style="margin-top: 50px;font-size: 25px;">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>

            <p>
                <a class="btn btn-primary btn-large">
                    Bootstrap
                </a>
            </p>
                <ul class="inline" style="list-style: none;">
                    <li>
                        <a href="">GitHub project</a>
                    </li>
                    <li>
                        <a href="">案例</a>
                    </li>
                    <li>
                        <a href="">扩展</a>
                    </li>
                    <li>
                        Version 2.3.2
                    </li>
                </ul>
    </div>
</div>
</header>
<!--正文-->
<article>
    <div class="container" style="margin-top: 100px;text-align: center;">
        <div class="row">
            <div class="span12" style="margin-bottom: 50px;">
                <h1 style="font-size: 50px;" >Bootstrap介绍。</h1>
                需要为爱上Bootstrap找N多理由吗？ 就在眼前。
            </div>
            <div class="span4">
                <img src="./img/bs-docs-twitter-github.png" alt="11"/>
                <h3>人人为我，我为人人。</h3>
                由@mdo 和 @fat 在Twitter工作时创建，Bootstrap使用 LESS CSS 并用 Node 编译，托管在 GitHub 上，方便大家使用这一框架构建更好的web应用。
            </div>
            <div class="span4">
                <img src="./img/bs-docs-responsive-illustrations.png" alt="22"/>
                <h3>任何人都可以使用。</h3>
                Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。在平板电脑和智能手机上面还有 响应式CSS 可以使用。
            </div>
            <div class="span4">
                <img src="./img/bs-docs-bootstrap-features.png" alt="33"/>
                <h3>丰富的特色。</h3>
                12列的响应式栅格结构、丰富的组件、JavaScript插件、排版、表单控件，还有 基于web的定制工具。
            </div>
        </div>
        <div class="row" style="margin-top: 100px;margin-bottom: 100px;">
            <div class="span12" style="text-align: center;margin-bottom: 50px;">
                <h1 style="font-size: 50px;" >基于Bootstrap构建的网站。</h1>
                更多基于Bootstrap构建的网站列表，请访问 优站精选 或者 看看下面的几个案例。
            </div>
            <div class="span3">
                <a href=""><img src="./img/f9c2f01fad1f23574156e0577a06c.jpg" alt="22"/>
                </a>
            </div>
            <div class="span3">
                <a href=""><img src="./img/2b88de566722366fffbb12ca7803a.jpg" alt="22"/>
                </a>
            </div>
            <div class="span3">
                <a href=""><img src="./img/8ac1e8d1c0bd6f8312afbacc52750.jpg" alt="22"/>
                </a>
            </div>
            <div class="span3">
                <a href=""><img src="./img/94a9c497c47468f8654ecab841247.jpg" alt="22"/>
                </a>
            </div>
        </div>
    </div>
</article>
<!--页脚-->
<footer class="footer">
    <div class="container" style="text-align: center">
        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p><a href="http://glyphicons.com">Glyphicons Free</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="inline">
            <li><a href="http://blog.getbootstrap.com">Blog</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/twbs/bootstrap/issues?state=open">Issues</a></li>
            <li class="muted">·</li>
            <li><a href="https://github.com/twbs/bootstrap/releases">Changelog</a></li>
        </ul>
    </div>
</footer>

<script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <!--<script src="./js/bootstrap.min.js"></script>-->
</body>
</html>